<template>
    <el-row class="login-box" type="flex" align="middle">
        <el-col class="left hidden-sm-and-down" 
            :lg="{ span:6,offset:6 }"
            :md="{ span:10,offset:2 }"
        >
            <!-- <img src="@/assets/login_img.png" alt="" srcset=""> -->
            <el-image :src=" require('@/assets/login_img.png') "></el-image>
        </el-col>
        <el-col class="right" 
            :lg="{ span:6,offset:0}" 
            :md="{ span:10,offset:0}" 
            :sm="{ span:16,offset:4}"
        >
            <el-card shadow="always">
                <img class="logo" src="@/assets/shop.png">
                <p class="title">电商后台管理系统</p>
                <el-form :rules="$rules.user" :model="user" ref="loginForm">
                    <el-form-item prop="username">
                        <el-input placeholder="请输入登录名称" prefix-icon="iconfont icon-user-fill"
                            v-model="user.username"
                        ></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input placeholder="请输入登录密码" prefix-icon="iconfont icon-lock-fill" show-password
                            v-model="user.password"
                        ></el-input>
                    </el-form-item>
                    <el-button type="primary" size="default" @click="isShowPuzzle=true">登录</el-button>
                </el-form>
            </el-card>
        </el-col>
        <VuePuzzle :show="isShowPuzzle" @success="dopuzzle"></VuePuzzle>
    </el-row>
</template>

<script>
import VuePuzzle  from 'vue-puzzle-vcode'

export default {
    components:{
        VuePuzzle
    },
    data() {
        return {
            isShowPuzzle:false,
            user:{
                username:"",
                password:""
            }
        }
    },
    methods:{
        dopuzzle(){
            this.isShowPuzzle = false;
            this.doLogin();
        },
        async doLogin(){
            try {
                // console.log(this.$refs.loginForm);
                await this.$refs.loginForm.validate()

                let user = await this.$api.login(this.user)

                // 有些公司登录后的数据还会在 vuex 中保存一份
                // 有些公司 对于 localStorage …… 功能的操作，会被封装成一个工具函数util
                localStorage.setItem("user",JSON.stringify(user))
                localStorage.setItem("token",user.token);

                // console.log("登录成功跳转页面",user);

                this.$router.push({
                    name:"home"
                })

            } catch (error) {
                // console.log("数据校验不通过",error);
            }
            // await this.$refs.loginForm.validate()
            // console.log("登录成功跳转页面");
        }
    }
}
</script>

<style lang="less" scoped>
.login-box{
    height: 100%;
    background-color: @login-bc;
    .left{
        padding:0px 40px;
    }
    .right{
        padding: 0px 40px;
    }
    .el-card{
        min-height: 400px;
        position: relative;
        overflow: unset;
        .logo{
            position: absolute;
            top:-100px;
            left: 50%;
            width: 140px;
            height: 140px;
            background-color: white;
            transform: translate(-50%,0);
            border-radius: 50%;
            object-fit: scale-down;
            padding: 10px;
            border: 8px solid @login-bc;
        }
        .title{
            margin-top: 70px;
            text-align: center;
            font-size: 22px;
        }
    }
    .el-form{
        margin-top: 36px;
        .el-form-item{
            margin-bottom: 36px;
        }
        ::v-deep.iconfont{
            padding-left: 4px;
        }
        .el-button{
            width: 100%;
        }
    }
}
</style>